<template>
	<view>
		<cu-custom :isBack="true" bgColor="bg-white">
			<block slot="content">
				<view class="custom-title">生成分享图片</view>
			</block>
		</cu-custom>
		<view @click="previewImage">
			<l-painter ref="painter">
				<template v-if="info.title">
				 <l-painter-view css="padding: 20rpx 56rpx">
					 <l-painter-view css="background-color: #fff;height: 920rpx;background-color: #fff;box-shadow: 0px 4rpx 8rpx 0px rgba(0, 0, 0, 0.2);padding: 40rpx 0 0 40rpx;display: flex;align-items: flex-start;justify-content: space-between;">
						<l-painter-view>
							<l-painter-view css="font-size: 26rpx;font-weight: 500;color: #010101;">
								<l-painter-text text="ID:" css="color: #010101;font-size: 26rpx;"></l-painter-text>
								<l-painter-text :text="info.code"  css="color: #010101;font-size: 26rpx;"></l-painter-text>
							</l-painter-view> 
							<l-painter-view>
								<l-painter-text :text="info.title"  css="width: 400rpx;overflow-x: hidden;padding-top: 96rpx;font-size: 40rpx;font-weight: 600;color: #010101;"></l-painter-text>
							</l-painter-view>
							<l-painter-view>
								<l-painter-text :text="info.subtitle"  css="width: 400rpx;overflow-x: hidden;padding-top: 16rpx;font-size: 26rpx;font-weight: 400;color: #767879;"></l-painter-text>
							</l-painter-view>
							<l-painter-view>
								<l-painter-view css="margin-top: -30rpx;">
									<l-painter-text text="发起单位："  css="color: #767879;font-size: 26rpx;"></l-painter-text>
								</l-painter-view>
								<l-painter-view>
									<l-painter-text :text="info.unit"  css="color: #010101;font-size: 26rpx;"></l-painter-text>
								</l-painter-view>
							</l-painter-view>
							<template v-if="info.daka">
								<l-painter-view css="margin-top: -30rpx;">
									<l-painter-view>
										<l-painter-text text="打卡时间："  css="color: #767879;font-size: 26rpx;"></l-painter-text>
									</l-painter-view>
									<l-painter-view css="color: #010101;font-size: 26rpx;">
										<l-painter-text :text="info.daka"  css="color: #010101;font-size: 26rpx;"></l-painter-text>
									</l-painter-view>
								</l-painter-view>
							</template>
							<l-painter-view css="margin-top: -30rpx;">
								<template v-if="info.type==1">
									<l-painter-view>
										<l-painter-text text="截至时间："  css="color: #767879;font-size: 26rpx;"></l-painter-text>
									</l-painter-view>
								</template>
								<template v-if="info.type==2">
									<l-painter-view>
										<l-painter-text text="任务周期："  css="color: #767879;font-size: 26rpx;"></l-painter-text>
									</l-painter-view>
								</template>
								<l-painter-view css="color: #010101;font-size: 26rpx;">
									<l-painter-text :text="info.start_date_text"  css="color: #010101;font-size: 26rpx;"></l-painter-text>
									<l-painter-text text=" ~ "  css="color: #010101;font-size: 26rpx;"></l-painter-text>
									<l-painter-text :text="info.end_date_text"  css="color: #010101;font-size: 26rpx;"></l-painter-text>
								</l-painter-view>
							</l-painter-view>
						</l-painter-view>
						<l-painter-image src="https://txr001.zthj.net/static/img/shareImg.png" css="width: 210rpx;height: 920rpx;"></l-painter-image>
					</l-painter-view> 
				    <l-painter-view css="background: #24458E;padding: 30rpx 40rpx;display: flex;align-items: center;justify-content: space-between;">
						<l-painter-view css="display: flex;align-items: flex-start;justify-content: space-between;">
							<l-painter-image src="https://txr001.zthj.net/static/img/logoWhite.png" css="width: 188rpx;height: 102rpx;"></l-painter-image>
						</l-painter-view>
						<l-painter-image :src="info.qr_url" css="width: 114rpx;height: 114rpx;"></l-painter-image>
					</l-painter-view>
				   </l-painter-view> 
				   </l-painter-view>
				 </l-painter-view>
				 </template>
			</l-painter>
		</view>
		<view class="share-content">
			<view class="content-bottom">
			</view>
			<view class="padding-top-xxl text-center" @click="previewImage">
				<image src="https://txr001.zthj.net/static/img/saveAndShare.png" class="img-48"></image>
				<view class="padding-top-8 text-sm text-0101">
					保存图片并分享
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				s_id: "",
				info: "",
				uqrShow: false,
			}
		},
		onLoad(options) {
			this.s_id = options.s_id
		},
		onShow() {
			this.getData();

		},
		methods: {
			previewImage() {
				this.$refs.painter.canvasToTempFilePathSync({
					fileType: "jpg",
					// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
					pathType: 'url',
					quality: 1,
					success: (res) => {
						console.log(res,res.tempFilePath , 'url');
						// 非H5 保存到相册
						// H5 提示用户长按图另存
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function () {
									console.log('save success');
									uni.showToast({icon: "none", title: "图片已保存到相册",});
								},
								fail: function(err){
									console.log(err,'save err');
								}
						})
					},
				});
			},
			async getData() {
				let param = {
					s_id: this.s_id
				}
				let res = await this.$api.statisticsInfo(param);
				if (!res.code) {
					this.$u.toast(res.msg);
					return;
				}
				this.info = res.data.info;
				console.log(this.info)
			}
		}
	}
</script>

<style>
	page {
		background: #F5F5F5;
	}
</style>
<style scoped lang="less">

</style>